<template>
  <view>
    <swiper
      :indicator-dots="true"
      :autoplay="true"
      :interval="1000"
      :duration="500"
      :circular="true"
    >
      <swiper-item>
        <view class="swiper-item1">
          {{ joke }}
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item">第二张轮播</view>
      </swiper-item>
    </swiper>
    <uni-badge text="1" type="error">1</uni-badge>
    <uni-badge text="2" type="success">2</uni-badge>
    <uni-badge text="3" type="warning">3</uni-badge>

    <view>
      <uni-calendar
        :insert="true"
        :lunar="true"
        :start-date="'2019-3-2'"
        :end-date="'2019-5-20'"
      />
    </view>
  </view>
</template>

<script setup>
  // 组合API 加上setup, 选项式API，则不需要加setup
  import { onMounted, ref } from 'vue'

  // import { onMounted, onShow } from 'vue'
  // import { onLaunch, onLoad } from '@dcloudio/uni-app'

  // onMounted(() => {
  //   console.log('渲染出来了！')
  // })

  // onShow(() => {
  //   console.log('显示出来了！')
  // })

  // const swiperChange = (e) => {
  //   console.log('****', e)
  // }

  // export default {
  //   onShow() {
  //     console.log('我显示出来了！')
  //   },
  // }
  const joke = ref('狐狸很容易摔跤，因为狡猾！')

  onMounted(async () => {
    // uni.request({
    //   url: 'https://api-vue-base.itheima.net/api/joke',
    //   method: 'GET',
    //   success(res) {
    //     uni.showToast({
    //       title: res.data,
    //     })
    //   },
    // })

    // uni
    //   .request({
    //     url: 'https://api-vue-base.itheima.net/api/joke',
    //     method: 'GET',
    //   })
    //   .then((res) => {
    //     console.log('笑话', res.data)
    //   })
    const res = await uni.request({
      url: 'https://api-vue-base.itheima.net/api/joke',
      method: 'GET',
    })

    joke.value = res.data
  })
</script>

<style>
  .swiper-item {
    background-color: aquamarine;
  }
  .swiper-item1 {
    background-color: chocolate;
  }
</style>
